<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><!-- 
<script src='/DWRTest/dwr/engine.js'></script>
<script src='/DWRTest/dwr/interface/DWRTest.js'></script>
<script src='/DWRTest/dwr/util.js'></script>
 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src=" <c:url value="/dwr/engine.js" />" type="text/javascript" charset="utf-8"></script>
<script type='text/javascript' src=' <c:url value="/dwr/interface/ChatDWR.js" />'></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>愛++聊天</title>
<!-- 搜尋好友清單 -->
<script type="text/javascript" src="<c:url value="/js/jquery.sieve.min.js" />"></script>
<script type="text/javascript">
		$(function(){
		// 在 table 上方加入一個搜尋功能
		$('#friendlist').sieve({
			searchTemplate: '<div style="position:absolute;bottom: 0px;margin-left:15px"><label>搜尋好友: <input type="text" id="search"></label></div>'
		});
		});		
</script>
<!-- 搜尋好友清單 -->
</head>
<body style="background-color: gray">

<script type="text/javascript">
dwr.engine.setActiveReverseAjax(true);
//下面這行很重要 當頁面重新整理 DWR Session不會重新刷新 或是自動把舊的DWR Session銷毀
dwr.engine.setNotifyServerOnPageUnload(true);
function callDWR(){
	if($("#chat").val()!=null)
	ChatDWR.doPush('${user.account}',$("#chatTo").html(),$("#chat").val());
}

//server push回來這個method 要抓自己和id的聊天記錄
function showMessage(msg) 
{ 
	if($("#chatTo").html()!=null)
	refresh(1);
} 

//選取聊天對象
function choose(data){
	//這邊抓取選取的ID  $(data).find("td").eq(1).text()
	$("#chatTo").html($(data).find("td").eq(1).text());
}

//滾動條置底
function scrollBottom(){
	var div = document.getElementById('result');
	div.scrollTop = div.scrollHeight; 
}

//刷新畫面
function refresh(page){
	$("#result").empty();
	var url = "/i_plus/View/ChatRefreshServlet.controller?"+
					"fromacc="+'${user.account}'+
					 "&toacc="+$("#chatTo").html()+
					 "&page="+page;
	$.getJSON(url, function(data) {						
				count = 2;
				$("#result").append("<span onclick='refreshmore();' style='color:#91C7FF'>更多訊息</span>");
				$.each(data,function(i,item){//foreach					
					$("#result").append(
							"<br><div style='border: 1px solid gray; width:600px;margin: 0px auto;border-radius:10px;background: white'>"+
							"<span  style='float:left;'>"+item.c_fromacc+":</span><br><br>"+
							"<span  style='float:left;'>"+item.c_content+"</span>"+
							"<span   style='float:right;width:170px;'>"+item.c_time+"</span><br></div><br>"						
					); 
				});
				scrollBottom();//置底
	});
}

//選取更多訊息
var count = 2;
function refreshmore(){
	$("#result").empty();
	var url = "/i_plus/View/ChatRefreshServlet.controller?"+
					"fromacc="+'${user.account}'+
					 "&toacc="+$("#chatTo").html()+
					 "&page="+count;
	$.getJSON(url, function(data) {						
		count += 1;
		$("#result").append("<span onclick='refreshmore();' style='color:#91C7FF'>更多訊息</span>");		
		$.each(data,function(i,item){//foreach					
					$("#result").append(
							"<br><div style='border: 1px solid;gray; width:600px;margin: 0px auto;border-radius:10px;background: white'>"+
							"<span  style='float:left;'>"+item.c_fromacc+":</span><br><br>"+
							"<span  style='float:left;'>"+item.c_content+"</span>"+
							"<span   style='float:right;width:170px;'>"+item.c_time+"</span><br></div><br>"						
					); 
				});
	});
}
</script>

<%@ include file="/menu.jsp" %> 
<!-- 空白 -->
<div style="margin-top: 10px ;text-align : center;">
<!-- 左側 -->
<div style="margin: 0px right;width: 200px;height:700px;right: 0;display:inline-block;float:left">
<!-- 左側 -->
</div>
<!-- 空白 -->
<!-- 聊天區塊 -->
<!--
其中width和height為單元格的寬高 
overflow-x:scroll; 出現上下的滾動 
overflow-y:scroll; 出現左右的滾動
overflow：auto為自動，超出單元格就會自動增加拉吧
SCROLLBAR-FACE-COLOR(立體滾動條拉動色塊的顏色) 
SCROLLBAR-HIGHLIGHT-COLOR(滾動條空白部份的顏色) 
SCROLLBAR-SHADOW-COLOR(立體滾動條陰影的顏色) 
SCROLLBAR-ARROW-COLOR(上下按鍵上三角箭頭的顏色) 
SCROLLBAR-BASE-COLOR(滾動條的基本顏色) 
SCROLLBAR-DARK-SHADOW-COLOR(立體滾動條強陰影的顏色)
-->
<div style="margin: 0px auto;width: 700px;height:700px;border: 1px solid gray;display:inline-block;border-radius:10px; background: white;">
<!-- 聊天對象 -->
<div style="margin: 0px auto;width: 700px;height:50px;display:inline-block;">
<br>
<span id="chatTo">請選擇聊天對象</span>
</div>
<!-- 聊天對象 -->
<!-- 聊天紀錄 -->
<div  id="result" style="margin: 0px auto;width: 700px;height:600px;border-top: 1px solid gray;display:inline-block;overflow-x:scroll;overflow：auto;">


</div><!-- 聊天紀錄 -->

<div style="position: relative;">
<input type="text" id="chat" style="width:500px;height:20px">
<input type="submit"  onclick="callDWR();">
</div>

</div>
<!-- 聊天區塊 -->
<!-- 好友清單 -->
<div style="margin-right:10px;margin: 0px right;width: 290px;height:700px;border: 1px solid gray;right: 0;display:inline-block;float:right;overflow-x:scroll;overflow：auto;position:relative;background-color: white;border-radius:10px;">

 <form style="margin: 0 auto;width: 300px;">
<table style="float: left" id="friendlist">
		<thead>
		<tr>
		<th></th>
		<th>好友清單</th>
		</tr>
		</thead>
<c:forEach var="bean"  items="${friendlist}" varStatus="status">
		<tr onclick="choose(this);refresh(1);">
         <td><img  src="data:${pic[status.index]}" width="30" ></td>
         <td >${bean}</td>
		</tr>
</c:forEach>
</table>
</form>
</div>
</div>
<!-- 好友清單 -->
<!-- hidden -->
<!-- hidden -->
</body>
</html>